<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .addGrade .input-group {
            margin-bottom: 5px;
        }
    </style>
</head>

<body>
    <form class="addGrade" onsubmit="return false">
        <div class="input-group">
            <label>姓名:</label>
            <input type="text" name="name">
        </div>
        <div class="input-group">
            <label>班级:</label>
            <input type="text" name="class">
        </div>
        <div class="input-group">
            <label>语文:</label>
            <input type="text" name="ch">
        </div>
        <div class="input-group">
            <label>数学:</label>
            <input type="text" name="mh">
        </div>
        <div class="input-group">
            <label>英语:</label>
            <input type="text" name="eh">
        </div>
        <div class="input-group">
            <input class="save" type="submit" value="保存">
            <input class="reset" type="reset" value="重置">
        </div>
    </form>
</body>
<script>
    var form = document.getElementsByTagName("form")[0];
    var nameInp = document.getElementsByName("name")[0];
    var classInp = document.getElementsByName("class")[0];
    var chInp = document.getElementsByName("ch")[0];
    var mhInp = document.getElementsByName("mh")[0];
    var ehInp = document.getElementsByName("eh")[0];
    var save = document.getElementsByClassName("save")[0];
    var reset = document.getElementsByClassName("reset")[0];


    save.onclick = function () {
        var name = nameInp.value;
        var _class = classInp.value;
        var ch = chInp.value;
        var mh = mhInp.value;
        var eh = ehInp.value;

        // 100  
        // 0 - 9
        // 10 - 99
        // 100

        var reg = /^(\d{1,2}(\.\d)?|100)$/;
        console.log(reg.test(ch));

        if (name && _class && reg.test(ch) && reg.test(mh) && reg.test(eh)) {

            // get方式传参 => 将参数数据队列 拼接到url之后 用"?" 分隔 

            // 参数数据队列 => a=1&b=2&c=3

            var xhr = new XMLHttpRequest();

            // xhr.open("get", "http://43.138.81.225/demo/php/addGrade.php?name=" + name + "&class=" + _class + "&ch=" + ch + "&mh=" + mh + "&eh=" + eh, true);
            xhr.open("get", `../php/addGrade.php?name=${name}&class=${_class}&ch=${ch}&mh=${mh}&eh=${eh}`, true);

            xhr.send();

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;
                    console.log(result);
                    var result = JSON.parse(result);
                    console.log(result);

                    var { status, message } = result;
                    if (status) {
                        if (confirm("新增成功,是否回返回主页")) {
                            location.href = "./index.html";
                        } else {
                            location.reload();
                        }
                    }
                }
            }

        } else {
            alert("请传入正确格式!");
        }

    }




</script>

</html>